import ConnectWallet from '../../components/ConnectWallet'
import GoodsInfoCard from '../../components/GoodsInfoCard'
import SelectGoods from '../../components/SelectGoods'
import { interfacesGoods } from '../../interfaces/goods'
import { getToken } from '../../utils/token'
import './index.scss'
import { useEffect, useState } from "react";
import { useNavigate } from 'react-router-dom'

function Home() {
  const [token, setToken] = useState(getToken());
  const navigate = useNavigate()

  useEffect(() => {
    getGoodsDetail()
    let interval = setInterval(() => {
      setToken(getToken());
    }, 1000)
    return () => {
      clearInterval(interval);
    }
  }, [])

  // 获取商品详情
  const [goods, setGoods] = useState()
  const getGoodsDetail = () => {
    interfacesGoods.goodsDetail({}).then(res => {
      setGoods(res.data);
    })
  }

  // 选择商品回调
  const [selectedGoods, setSelectGoods] = useState()
  const onSelectGoodsHandle = (e) => {
    setSelectGoods(e);
  }

  // 跳转商品
  const goGoodsDetail = () => {
    navigate('/product');
    window.scrollTo(0, 0);
  }

  // 钱包已连接
  const [isConnect, setIsConnect] = useState(false)
  const onConnected = () => {
    setIsConnect(true);
  }

  return (
    <div className='home'>
      <div className='banner'>
        <div className='text'>
          <div>Whispers in the Air,</div>
          <div><span>WISP</span>Everywhere.</div>
        </div>
        <img className='product-banner' alt='banner product' src={require('../../assets/product1.png')} />
      </div>

      <div className='product'>
        <div className='title'>
          <img className='title-icon' alt='title icon' src={require('../../assets/text-pre.png')} />
          <div className='text'>WISP Healthy e-cigarettes</div>
        </div>
        <div className='content'>
          <SelectGoods className="select-goods" goods={goods} onSelectGoods={onSelectGoodsHandle}></SelectGoods>
          <div className='product-info'>
            <GoodsInfoCard goods={goods} selectedGoods={selectedGoods}></GoodsInfoCard>
            <div className='opt'>{
              token || isConnect ? (
                <div className='btn' onClick={goGoodsDetail}>Join the flash sale now</div>
              ) : (
                <ConnectWallet size={'large'} onConnected={onConnected}></ConnectWallet>
              )
            }</div>
          </div>
        </div>
      </div>

      <div className='product-desc'>
        <div className='title'>
          <img className='title-icon' alt='title icon' src={require('../../assets/text-pre.png')} />
          Whispers In The Air, WISP
          Everywhere.
        </div>
        <img className='product-2' alt='banner product' src={require('../../assets/product2.png')} />
      </div>

      <div className='product-active'>
        <div className='item'>
          <img className='icon' alt='' src={require('../../assets/group1.png')} />
          Early Benefits
        </div>
        <div className='item'>
          <img className='icon' alt='' src={require('../../assets/group2.png')} />
          Buy More Get More
        </div>
        <div className='item'>
          <img className='icon' alt='' src={require('../../assets/group3.png')} />
          Immediate Earnings
        </div>
        <div className='item'>
          <img className='icon' alt='' src={require('../../assets/group4.png')} />
          Token Value Growth
        </div>
      </div>

      <div className='product-auth'>
        <div className='rewards'>
          <div className='title'>
            <img className='icon' alt='' src={require('../../assets/text-pre.png')} />
            Rewards
          </div>
          <div className='content'>
            WISP offers not only the joy of stylish WISPing but also<br />
            Token rewards,unleashing the infinite potential of<br />
            digital currency.
          </div>
        </div>
        <div className='health'>
          <div className='title'>
            Health
            <img className='icon' alt='' src={require('../../assets/text-pre.png')} />
          </div>
          <div className='content'>
            WISP adheres to the core philosophy of "healthyWISPing,"<br />
            aiming to provide a platformthat meets WISPing needs<br />
            while focusing on health.
          </div>
        </div>
        <div className='authority'>
          <div className='title'>
            <img className='icon' alt='' src={require('../../assets/text-pre.png')} />
            Authority
          </div>
          <div className='content'>
            In collaboration with authoritative WISPing medical research <br />
            institutions, all user WISPing data undergo professional<br />
            analysis to ensure everyone stays within a safe and reasonable<br />
            WISPing range.
          </div>
        </div>
        <div className='safety'>
          <div className='title'>
            Safety
          </div>
          <div className='content'>
            Valuing user safety, WISP products strictly comply with international e- cigarette safety standards, <br />
            ensuring every puff is a safe and reliable choice.
          </div>
        </div>
      </div>

      <div className='sence'>
        <div className='item'>
          <div className='title'>
            <img className='icon' alt='' src={require('../../assets/text-pre.png')} />
            Social
          </div>
          <div className='content'>
            With the WISP mobile app, users can easily find their<br />
            companions and interact with other members of the<br />
            WISPing community.
          </div>
        </div>
        <div className='item'>
          <div className='title'>
            <img className='icon' alt='' src={require('../../assets/text-pre.png')} />
            Eco-friendly
          </div>
          <div className='content'>
            We are committed to sustainable development,<br />
            designing WISP products with efficient recycling in<br />
            mind to reduce environmental impact.
          </div>
        </div>
        <div className='item'>
          <div className='title'>
            <img className='icon' alt='' src={require('../../assets/text-pre.png')} />
            Quality
          </div>
          <div className='content'>
            WISP not only offers an exceptional product<br />
            experience but also guarantees superior after-sales<br />
            service, ensuring a worry-free user experience.
          </div>
        </div>
        <div className='item'>
          <div className='title'>
            <img className='icon' alt='' src={require('../../assets/text-pre.png')} />
            Entertainment
          </div>
          <div className='content'>
            The WISP WISPing Mining Project invites you to<br />
            experience a novel concept of vaping.
          </div>
        </div>
      </div>
      <div className='bottom-box'></div>
    </div>
  )
}

export default Home